<template>
    <div class="Forget">
        <!-- <appraisalbar ref="personBar"></appraisalbar> -->
        <Header :isBack="isBack" v-bind:title="title"></Header>
        <div class="loginConent">
            <div class="content">
                <div class="item">
                    <div class="itemContent">
                         <!-- <img src="../../assets/login/tel.png" alt="" class="itemimg"> -->
                         <span class="iconfont icon-lianxiren1"></span>
                        <input type="number" placeholder="请输入手机号" v-model="paramData.tel" maxlength="11">
                    </div>

                </div>
                <div class="item">
                    <div class="itemContent" style="display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;">
                        <div style="height:100%;display:flex;align-items:center;">
                            <!-- <img src="../../assets/login/code.png" alt="" class="itemimg"> -->
                            <span class="iconfont icon-yanzhengyanzhengma"></span>
                            <input type="number" placeholder="请输入验证码" class="codeinput" v-model="paramData.code" maxlength="6">
                        </div>
                        <div class="getcode" @click="getcode(paramData.tel)">{{ctext}}</div>
                    </div>
                </div>
                <div class="item">
                    <div class="itemContent">
                         <!-- <img src="../../assets/login/password.png" alt="" class="itemimg"> -->
                         <span class="iconfont icon-login_mima"></span>
                        <input type="password" placeholder="重新设置密码(不超过8位)" v-model="paramData.password" maxlength="8">
                    </div>
                </div>
                <div class="item" >
                    <div class="itemContent">
                         <!-- <img src="../../assets/login/password.png" alt="" class="itemimg"> -->
                         <span class="iconfont icon-login_mima"></span>
                        <input type="password" placeholder="确认新密码" v-model="paramData.aginpassword" maxlength="8">
                    </div>
                </div>
            </div>
            <div class="loginBtn" @click="register(paramData.tel,paramData.code,paramData.password,paramData.aginpassword)">
                <div class="logintext">保&nbsp;&nbsp;存</div>
            </div>
        </div>
    </div>
</template>
<script>
//import appraisalbar from '../../components/Header'
export default {
  components: {
    //appraisalbar
  },
  data () {
    return {
        isBack:true,
        title:'重置密码',
      paramData: {
        tel: '',
        code: '',
        password: '',
        aginpassword: ''
      },
      count: 60,
      ctext: '获取验证码'

    }
  },
  methods: {
    getcode (tel) {
        //return
        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //手机号验证
        var that = this
        var settime = function (that) {
        var timeOut
        if (that.count == 0) {
          // ctext: '获取验证码',
          that.ctext = '获取验证码'
          that.count = 60
          clearTimeout(timeOut)
          return
        } else {
          that.ctext = '重新发送' + that.count + '秒'
          that.count--
        }
        setTimeout(function () {
          settime(that)
        }, 1000)
        }
        if (tel == "") {
            this.AlertWin("手机号不能为空");
        } else if (!myreg.test(tel)) {
            this.AlertWin("请输入正确的手机号！");
        }else if (that.ctext == '获取验证码') {
            settime(that)
            var data = {
            'mobile': tel
            }
            var url = this.$host1 + `home/sendCode`;
            this.$axios.post(url, data).then(res => {
            var resData = res.data;
            console.log(resData);
            if (resData.code == 200) {
                this.AlertWin("发送成功！");
                // setTimeout(()=>{
                //     that.paramData.code = resData.vcode;
                // },3000)
                
                } else {
                    this.AlertWin(resData.message);
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        }
    },
    register (tel, code, password, aginpassword) {
      //console.log(tel, code,password, aginpassword)
      if (tel == '' || tel == undefined || tel == null) {
        this.AlertWin('手机号码不能为空')
      } else if (code == '' || code == undefined || code == null) {
        this.AlertWin('验证码不能为空')
      } else if (password == '' || password == undefined || password == null) {
        this.AlertWin('密码不能为空')
      } else if (aginpassword == '' || aginpassword == undefined || aginpassword == null) {
       this.AlertWin('确认密码不能为空')
      } else {
        if (password !== aginpassword) {
         this.AlertWin('两次密码不一致')
        } else {
          // var url = this.$host + `www/met/front/retrieve_password`
          var data = {
            'mobile': tel,
            'vcode': code,
            'password': password,
            're_password': aginpassword
          }
          var url = this.$host1 + `home/findPassword`
          this.$axios.post(url, data).then(res => {
              console.log(res)
            if (res.code == 200) {
              this.AlertWin('修改成功，请重新登录！')
              this.$router.path({
                path: '/login'
              })
            }else{
                this.AlertWin(res.data.message)
            }
          })
        }
      }
    }
  },
  mounted () {
    
    }
}
</script>
<style lang="scss">
    .Forget{
        width:100%;
        height:100vh;
        overflow: hidden;
        .loginConent{
            width:100%;
            height:auto;
            .content{
                 margin:0 auto;
                margin-top:1.2rem;
                .item{
                    width:100%;
                    height:0.84rem;
                    background: #ffffff;
                    margin-top:0.24rem;
                    .itemContent{
                        width:7.02rem;
                        height:0.84rem;
                        display:flex;
                        align-items:center;
                        margin:0 auto;
                            // .itemimg{
                            //     width: 44px;
                            //     height: 46px;
                            // }
                            .iconfont{
                              font-size:0.48rem;
                              color:#5A01A3;
                              margin-top:0.08rem;
                            }
                            input{
                                //background-color: greenyellow;
                                width:5.4rem;
                                border:0;
                                outline:0;
                                background:none;
                                height:0.8rem;
                                margin-left: 0.1rem;
                                //margin-top:0.3rem;
                                font-size: 0.32rem;
                                color: #999999;
                            }
                            .codeinput{
                                width:3rem;
                            }
                            .getcode{
                                // width:168px;
                                font-size: 0.32rem;
                                color: #f44349;
                            }
                    }

                }
            }
             .loginBtn{
                 background-color: #fff;
                width:100%;
                height:1rem;
                padding: 0.15rem 0.24rem;
                box-sizing: border-box;
                margin-top:1.1rem;
                position: fixed;
                bottom:0;
                left:0;
                .logintext{
                    width:100%;
                    height:0.7rem;
                    background:rgba(84,5,117,1);
                    border-radius:0.08rem;
                    font-size:0.32rem;
                    color:#ffffff;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                }
            }
        }
    }
</style>
